import React, { Component } from "react";
import "./05.css";

class Child extends Component {
  render() {
    let { title, score } = this.props;
    return (
      <globelContext.Consumer>
        {(val) => (
          <div
            className="child"
            onClick={() => {
              val.callback(title);
              console.log(val);
            }}
          >
            <div className="left"></div>
            <div className="right">
              <div>{title}</div>
              <div>{score}</div>
            </div>
          </div>
        )}
      </globelContext.Consumer>
    );
  }
}

class Detail extends Component {
  render() {
    return (
      <globelContext.Consumer>
        {(val) => (
          <div className="detail">
            <div>{val.info}</div>
            <div></div>
          </div>
        )}
      </globelContext.Consumer>
    );
  }
}

let globelContext = React.createContext();
export default class App extends Component {
  state = {
    list: [
      {
        title: "第一个列表",
        score: "88分",
      },
      {
        title: "第二个列表",
        score: "88分",
      },
      {
        title: "第三个列表",
        score: "88分",
      },
    ],
    info: "",
  };
  render() {
    return (
      <globelContext.Provider
        value={{
          info: this.state.info,
          callback: (val) => {
            this.setState({
              info: val,
            });
          },
        }}
      >
        <div>
          {this.state.list.map((item, index) => {
            return <Child {...item} key={index} />;
          })}
          <Detail />
        </div>
      </globelContext.Provider>
    );
  }
}
